<template>
  <el-dialog :visible.sync="dialogVisible" :title="title" :close-on-click-modal="false" width="500px">
    <div class="rule-form-contain">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        size="small"
        label-width="95px"
      >
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="ruleForm.name" clearable placeholder="">
          </el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="ruleForm.sort"
            :controls="true"
            :max="10000"
            size="small"
            placeholder=""
            style="width:200px"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="英文名称" prop="enname">
          <el-input v-model="ruleForm.enname" clearable placeholder="">
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button :loading="loading" size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button :loading="loading" size="small" type="primary" @click="validateSubmit(ruleForm)">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import clonedeep from 'lodash.clonedeep'
// import { newsCategoryAdd, newsCategoryUpdate } from '@/api/newsCategory.js'
import { add, remove } from '@/mock/index'
export default {
  name: 'RuleFormDialog',
  props: {
    // 是否显示
    visible: {
      type: Boolean,
      default: false
    },
    // 是否是编辑
    isEdit: {
      type: Boolean,
      default: false
    },
    // 详情数据
    detailData: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      loading: false,
      // 表单
      ruleForm: {
        sort: 1
      },
      // 验证
      rules: {
        // 分类名称
        name: [
          {
            // 必填
            required: true,
            message: '请输入',
            trigger: 'blur'
          }
        ],
        // 排序
        sort: [
          {
            // 必填
            required: true,
            message: '请输入',
            trigger: 'change'
          }
        ],
        // 分类英文名称
        enname: [
          {
            // 必择
            required: true,
            message: '请选择',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    title () {
      if (this.isEdit) {
        return '编辑分类'
      } else {
        return '添加分类'
      }
    },
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (newValue) {
        this.$emit('update:visible', newValue)
      }
    }

  },
  created () {
    this.ruleForm = Object.assign({}, this.ruleForm, clonedeep(this.detailData))
  },
  methods: {
    // 验证
    validateSubmit (ruleForm) {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.submit(ruleForm)
        } else {
          return false
        }
      })
    },
    // 提交表单
    async submit (ruleForm) {
      this.loading = true
      if (this.isEdit) {
        // 编辑
        const res = await remove(ruleForm)
        if (res.code === '0000') {
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.dialogVisible = false
          this.$emit('success')
        }
      } else {
        // 增加
        const res = await add(ruleForm)
        if (res.code === '0000') {
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.dialogVisible = false
          this.$emit('success')
        }
      }
      this.loading = false
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.rule-form-contain {
  padding: 15px 20px 0 0;
  >>> .el-form {
    .el-form-item:last-child {
      margin-bottom: 0px !important;
    }
  }
}
</style>
